<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心_趣玩</title>
    <link rel="stylesheet" href="css/login.css">
    <link rel="icon" type="images/x-ico" href="images/favicon.ico">
    <link rel="stylesheet" href="css/resest.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <div class="login">
        <div class="login-top">
            <img src="images/logo.gif" alt="">
            <div class="login-btn"><b>如未注册，点此 </b>
                <a href="register.html">注册</a>
            </div>
        </div>

        <div class="login-center">
            <div class="center-table">
                <ul class="box1">
                    <li><span class="iconfont icon-huiyuan"></span> 会员登录</li>
                    <li><span class="iconfont icon-shouji01"></span> 手机动态密码登录</li>
                </ul>
                <form action="" method="get">
                    <ul class="box2">
                        <li class="input-box"><input type="text" placeholder="用户名、手机、邮箱">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="input-box"><input type="password" placeholder="密码">
                            <span class="iconfont icon-cuowu1"></span>
                            <span class="iconfont icon-zhengque1"></span>
                        </li>
                        <li class="error-box"></li>
                        <li class="law">
                            <input type="checkbox" name="" id="" checked>
                            &nbsp;请保存我这次的登录信息。
                            <a href="https://www.quwan.com/user.php?act=get_password">忘记密码？</a>
                        </li>
                        <li class="error-box"></li>
                        <li class="btn"><input type="button" value="登录"></li>
                    </ul>
                    <div class="box-end">
                        <p class="p2">使用第三方账号登录</p>
                        <div class="box-other">
                            <span class="iconfont icon-qq" style="background-color: #28a8e4;"></span>
                            <span class="iconfont icon-weibo" style="background-color: #fb5056;"></span>
                            <span class="iconfont icon-zhifubaozhifu" style="background-color: #f3a426;"></span>
                            <span class="iconfont icon-weixin" style="background-color: #00c100;"></span>
                        </div>
                    </div>
                    <div class="member">进入会员卡登录</div>
                </form>
                <div class="cellphone">
                    功能尚未开放，请选择用户名和密码登录！
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="js/jquery.js"></script>
<script src="js/login.js"></script>
<script>
    //登录验证
    $(".input-box").eq(0).children("input").on("blur", function () {
        let reg = /^.{5,13}$/;
        if (reg.test($(this).val())) {
            $(this).next().hide().next().show();
            $(".error-box").eq(0).text("");
        } else {
            $(".error-box").eq(0).text("账号格式错误，请重新输入");
            $(".error-box").eq(0).css({
                color: "red"
            })
        }
    })
    $(".input-box").eq(1).children("input").on("blur", function () {
        let reg = /^.{6,16}$/;
        if (reg.test($(this).val())) {
            $(this).next().hide().next().show();
            $(".error-box").eq(1).text("");
        } else {
            $(".error-box").eq(1).text("密码格式错误");
            $(".error-box").eq(1).css({
                color: "red"
            })
        }
    })
    $(".btn").on("click", function () {
        let name = $(".input-box").eq(0).children("input").val();
        let pass = $(".input-box").eq(1).children("input").val();
        let c = $(".law").children("input").prop("checked");
        let a = $(".error-box").eq(0).text() == "";
        let b = $(".error-box").eq(1).text() == "";
        if (name == "" && pass == "") {
            alert("请输入账号和密码");
        } else {
            $.post(
                'goodsAndShoppingCart/login.php',
                {
                    username: name,
                    userpass: pass,
                }, function (data) {
                    if (data.trim() == "success") {
                        alert("登录成功,两秒后自动跳转至首页");
                        setTimeout(function () {
                            location.href = 'index.html';
                        },2000)
                    } else {
                        alert("账户或密码错误");
                    }
                }
            )
        }
    })
</script>